<template>
  <section class="welcome">
    <img :src="require('@/assets/main-bg.jpg')" alt="">

    <section class="title">
      <p>欢迎使用</p>
      <p>{{welcomeTitle}}</p>
    </section>

    <section class="video-list__container" v-if="isShow">
      <section class="preview-video" v-if="currentVideoUrl">
        <video :src="currentVideoUrl" controls></video>
      </section>
      <a-card title="帮助视频" class="preview-video-list" >
        <a-icon slot="extra" type="close" @click="isShow = false" />
        <section class="video-list">
          <section :key="item.title" v-for="item in videoList" @click="handlerPreviewVideo(item)">{{item.title}}</section>
        </section>

        服务热线：{{telephone}}
      </a-card>
    </section>
  </section>
</template>
<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import {
  userModule
} from '@/store/modules/user'

import {
  settingModule
} from '@/store/modules/setting'

@Component({})
export default class Welcome extends Vue {

  get welcomeTitle() {
    return userModule.userInfo.admin_info.title3
  }

  get telephone() {
    return settingModule.telephone
  }

  get realname() {
    return userModule.userInfo?.usr_nickname
  }

  public isShow = true
  public currentVideoUrl = ''
  public videoList = [
    {
      title: '1.业务操作流程与图示',
      url: '耕地地力保护服务信息平台操作要点.pdf'
    },
    {
      title: '1.1系统基础功能模块',
      url: '1.1系统基础功能模块.mp4'
    },
    {
      title: '1.2用户及权限操作',
      url: '1.2用户及权限操作.mp4'
    },
    {
      title: '2.1一般农户基础信息管理',
      url: '2.1一般农户补贴信息管理.mp4'
    },
    {
      title: '2.2补贴状态切换与面积管理',
      url: '2.2补贴状态切换与面积管理.mp4'
    },
    {
      title: '2.3补贴核算依据和标准设置',
      url: '2.3补贴核算依据和标准设置.mp4'
    },
    {
      title: '2.4一般农户补贴公示操作',
      url: '2.4公示流程.mp4'
    },
    {
      title: '2.5一般农户银行兑付',
      url: '2.5资金发放.mp4'
    },
    {
      title: '3.1种粮大户基础信息操作',
      url: '3.1大户基础信息管理.mp4'
    },
    {
      title: '3.2种粮大户补贴面积管理和审核操作',
      url: '3.2补贴面积管理和审核操作.mp4'
    },
    {
      title: '3.3种粮大户补贴核算依据和标准设置',
      url: '3.3补贴核算依据和标准设置.mp4'
    },
    {
      title: '3.4种粮大户公示流程',
      url: '3.4大户公示流程.mp4'
    },
    {
      title: '3.5种粮大户银行兑付操作',
      url: '3.5大户的资金发放.mp4'
    },
    {
      title: '4.1种粮一次补信息管理',
      url: '4.1种粮一次补信息管理.mp4'
    },
    {
      title: '4.2一次补状态切换和后续流程整合',
      url: '4.2一次补状态切换和后续流程整合.mp4'
    },
    {
      title: '5.1银行对付信息上传',
      url: '银行对付信息上传.mp4'
    },
    {
      title: '6.1监控功能讲解',
      url: '6.1监控.mp4'
    },
  ]

  public mounted() {
    // if (!this.currentVideoUrl) {
    //   this.handlerPreviewVideo(this.videoList[0])
    // }
    if (!this.realname) {
      this.$warning({
        title: "提示",
        content: "您的个人信息待完善，请前往完善相关信息",
        okText: '前往完善',
        keyboard: false,
        onOk: () => {
          this.$router.push('/common/settings/base?force=1')
        }
      })
    }
  }

  public handlerPreviewVideo(item: { title: string, url: string }) {
    if (!item.url) return
    const url = 'https://bh.cun8888.com:2023/vcd/' + item.url
    // word文件直接下载
    if (/.pdf$/.test(url)) {
      window.open(url)
      // const a = document.createElement('a')
      // a.href = url
      // a.click();
      return
    }
    this.currentVideoUrl = url
  }
}
</script>
<style scoped lang="less">
.title {
  width: 90%;
  font-size: 32px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 33%;
  color: rgb(41, 138, 41);
  font-weight: bold;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  user-select: none;
  text-align: center;
  p {
    margin-bottom: 20px;
  }
  p:nth-child(2) {
    font-size: 32px;
    line-height: 1.2;
  }
}
img {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // filter: blur(2px);
  filter: opacity(90%);
}
.welcome {
  height: 100%;
  overflow: hidden;
}
.video-list__container {
  max-width: 80%;
  position: fixed;
  right: 50px;
  top: 100px;
  display: flex;
  .preview-video {
    flex: auto;
    background-color: #fff;
    video {
      height: 100%;
      width: 100%;
    }
  }
  .preview-video-list {
    flex: none;
  }
}
.video-list {
  section {
    margin-bottom: 10px;
    cursor: pointer;
    &:hover {
      color: @primary-color;
    }
  }
}
</style>
